<!DOCTYPE html>
<html>

<head>
    <title>Mapbox加载3857坐标系demo</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }

        .layerPanel {
            position: absolute;
            top: 10px;
            right: 20px;
            background: #ffffff;
            padding: 5px 2px;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script>
        let tdt = true;
        let layer_geoVt = false;
        let layer_wmts = false;
        let curr = '';
        let center = [116.39, 39.91];
 //获取地图样式
        let style = getStyle();
        //创建3857坐标系地图
        var map = window.map = new mapboxgl.Map({
            container: 'map',
            // epsg: 'EPSG:3857',
            center : [120.5658, 31.3857],
            zoom:12,
            hash: true,
            style: style
        });
        // map.showTileBoundaries = true;
        map.on('load', function () {
            //添加天地图底图
            addTDTLayers(map);
            map.addLayer({
                "type": "circle",
                "source": "test",
                "paint":{

                "circle-color": "red",
                "circle-radius":4,
                },
                "source-layer": "points",
                "maxzoom": 14,
                "id": "1"
            })
            map.addLayer({
                "type": "line",
                "source": "test",
                "source-layer": "line",
                "maxzoom": 14,
                "id": "2",
                "layout": { "line-join": "miter", "line-miter-limit": 2, "line-round-limit": 1.05 }, "paint": { "line-color": "#5028D5" }
            })
            map.addLayer({
                "type": "fill",
                "source": "test",
                "source-layer": "polygon",
                "maxzoom": 14,
                "id": "3",
                "paint": { "fill-color": "#60D330", "fill-outline-color": "#000000" }
            })
        });

        function getStyle() {
            let style = {
                "version": 8,
                "name": "Basic-my",
                "metadata": {
                    "mapbox:autocomposite": true,
                    "mapbox:type": "template"
                },
                "center": center,
                "zoom": 3,
                "bearing": 0,
                "pitch": 0,
                "sources": {
                    "test": {
                        "type": "vector",
                        "tiles": ["http://localhost:9080/pg_postgis_mvt/api/v1/jcb_cd/{z}/{x}/{y}"]
                    }
                },
                "layers": [],
                "created": "2017-09-18T02:18:17.059Z",
                "id": "cj7pjk1qrc3k92so5dn7vp6yc",
                "modified": "2017-09-18T02:36:38.832Z",
                "owner": "小刘先森",
                "visibility": "private",
                "draft": false
            };
            return style;
        }
        //添加3857坐标系天地图
        function addTDTLayers(map) {
            //添加3857天地图矢量source
            var source_vec = {
                "type": "raster",
                "tiles": [
                    "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7b06bd204544a8631beccd5fd56ad8c1",
                ],

                "tileSize": 256
            }
            if (!map.getSource("TDT_VEC")) {
                map.addSource("TDT_VEC", source_vec);
            }

            //添加3857天地图矢量图层
            var Layer_vec = {
                "id": "tdtvec",
                "type": "raster",
                "source": "TDT_VEC",
                "minzoom": 0,
                "maxzoom": 17
            }
            if (!map.getLayer("tdtvec")) {
                map.addLayer(Layer_vec);
            }
            //添加3857天地图矢量注记source
            var source_cva = {
                "type": "raster",
                "tiles": [
                    "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7b06bd204544a8631beccd5fd56ad8c1",
                ],

                "tileSize": 256
            }
            if (!map.getSource("TDT_CVA")) {
                map.addSource("TDT_CVA", source_cva);
            }
            //添加3857天地图矢量注记图层
            var Layer_cva = {
                "id": "tdtcva",
                "type": "raster",
                "source": "TDT_CVA",
                "minzoom": 0,
                "maxzoom": 17
            }
            if (!map.getLayer("tdtcva")) {
                map.addLayer(Layer_cva);
            }
        }
        
    </script>
</body>

</html>